<template>
  <Layout style="height: 100%" class="main">

    <Sider hide-trigger collapsible :width="210" :collapsed-width="64" v-model="collapsed">
      <side-menu accordion :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage"
                 :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <div v-show="!collapsed" key="max-logo" style="color: #ffffff;font-size: 22px;">
            <span v-if="!$store.state.user.logoTxt">智慧停车管理平台</span>
            <span v-else>{{$store.state.user.logoTxt}}{{this.$store.state.user.logoTextNew}}</span>
          </div>
          <div v-show="collapsed" key="min-logo" style="color: #ffffff;font-size: 22px;">
            <span v-if="!$store.state.user.logoUrl">P</span>
            <span v-else><img :src="logoUrl" style="width: 100%;height: 100%;"/></span>
          </div>
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :user-avator="userAvator"/>
        </header-bar>
      </Header>
      <Content >
        <Layout>
          <div class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
          </div>
          <Content>
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
  import sideMenu from './components/side-menu'
  import headerBar from './components/header-bar'
  import tagsNav from './components/tags-nav'
  import user from './components/user'
  import {mapMutations, mapActions } from 'vuex'
  import {getNewTagList, getNextName} from '@/libs/util'
  import minLogo from '@/assets/images/logo-min.jpg'
  import maxLogo from '@/assets/images/logo.jpg'
  import './main.less'
  import urlSource from '../../api/urlSource'
  import Bus from '../../bus/bus'

  export default {
    name: 'Main',
    components: {
      sideMenu,
      headerBar,
      tagsNav,
      user
    },
    data() {
      return {
        collapsed: false,
        minLogo,
        maxLogo,
        logoUrl:''
      }
    },
    computed: {
      tagNavList() {
        return this.$store.state.app.tagNavList
      },
      tagRouter() {
        return this.$store.state.app.tagRouter
      },
      userAvator() {
        return this.$store.state.user.avatorImgPath
      },
      cacheList() {
        return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)) : []
      },
      menuList() {
        return this.$store.getters.menuList
      },

    },
    methods: {
      ...mapMutations([
        'setBreadCrumb',
        'setTagNavList',
        'addTag'
      ]),
      ...mapActions([
        'handleLogin'
      ]),
      turnToPage(name) {
        this.$router.push({
          name: name
        })
      },
      handleCollapsedChange(state) {
        this.collapsed = state
      },
      handleCloseTag(res, type, name) {
        const nextName = getNextName(this.tagNavList, name)
        this.setTagNavList(res)
        if (type === 'all') this.turnToPage('home')
        else if (this.$route.name === name) this.$router.push({name: nextName})
      },
      handleClick(item) {
        this.turnToPage(item.name)
      },
    },
    watch: {
      '$route'(newRoute) {
        this.setBreadCrumb(newRoute.matched)
        this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      },
    },
    mounted() {
      /**
       * @description 初始化设置面包屑导航和标签导航
       */
      this.setTagNavList()
      this.addTag(this.$store.state.app.homeRoute)
      this.setBreadCrumb(this.$route.matched)
      this.logoUrl = urlSource._tempShowUrl + this.$store.state.user.orgId +
                  '/' + this.$store.state.user.userId+ '?uuid='+new Date().getTime();
      let _this = this;
      Bus.$on('logoUrlChg', (data) => {
        _this.logoUrl = urlSource._tempShowUrl + this.$store.state.user.orgId +
          '/' + this.$store.state.user.userId+ '?uuid='+new Date().getTime();
      })
    }
  }
</script>
<style>
  .main .logo-con{
    padding: 10px 5px;
  }
</style>
